<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户注册</title>
    <link type="text/css" rel="stylesheet" href="../css/zhang_register.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>

</head>
<body class="login_bj" >

<div class="zhuce_body">
    <div class="zhuce_kong">
    	<div class="zc">
        	<div class="bj_bai">
            <h3>欢迎注册</h3>
       	  	  <form>
                <input id="userName" name="userName" type="text" class="kuang_txt phone" placeholder="用户名必填"  value="" onblur="checkName()"><span id="sp1"></span><br>
                <input id="userPassword1" name="userPassword" type="password" class="kuang_txt possword" placeholder="密码必填" value="" onblur="checkPass1()"><span id="sp2"></span><br>
                <input id="userPassword2" type="password" class="kuang_txt possword" placeholder="确认密码必填" value="" onblur="checkPass2()"><span id="sp3"></span><br>
                <input id="userPhone"  name="userPhone" type="text" class="kuang_txt phone" placeholder="手机号必填" value="" onblur="checkPhone()"><span id="sp4"></span><br>
                <input id="userEmail" name="userEmail" type="text" class="kuang_txt email" placeholder="邮箱必填" value="" onblur="checkEmail()"><span id="sp5"></span><br>
                <div>
               		<input name=" " id="xy" type="checkbox" value="" onchange="ydxy"><span>已阅读并同意<a href="#" target="_blank"><span class="lan">《XXXXX使用协议》</span></a></span>
                </div>
                <input name="注册" type="button" class="btn_zhuce" value="注册" onclick="regist()">
                </form>
            </div>
        	<div class="bj_right">
            	<p>使用以下账号直接登录</p>
                <a href="#" class="zhuce_qq">QQ注册</a>
                <a href="#" class="zhuce_wb">微博注册</a>
                <a href="#" class="zhuce_wx">微信注册</a>
                <p>已有账号？<a href="toLogin">立即登录</a></p>
            </div>
        </div>
        <P>西瓜二手车登陆 2023.03.30<a href="#" target="_blank"></a></P>
    </div>

</div>
</body>
</html>
<script type="text/javascript">
    //全局作用域
    var flag=false;
    //验证用户名是否存在
    function checkName(){
        //获得用户名
        var username = $("#userName").val();
        //判断是否为空
        if(username != null && username != ''){
            //不为空通过ajax进行验证
            $.ajax({
                url:"/user/queryUserByName",
                type:"post",
                data:{"username":username},
                success:function (data){
                    if (data=="2"){
                        $("#sp1").html("<font color='green'>√</font>");
                        flag=true;
                    }else {
                        $("#sp1").html("<font color='red'>用户名重复，请重新输入!</font>");
                        flag=false;
                    }
                },error:function (){
                    alert("查询失败！");
                }
            })
        }else {
            $("#sp1").html("<font color='red'>用户名不能为空，请重新输入用户名！</font>");
            // alert("用户名不能为空，请重新输入用户名！")
            flag=false;
        }
    }
    //验证密码
    function checkPass1(){
        var userpass1 = $("#userPassword1").val();
        if (userpass1 != null && userpass1 != ''){
            $("#sp2").html("<font color='green'>√</font>");
            return true;
        }else {
            $("#sp2").html("<font color='red'>密码不能为空!</font>");
           // alert("密码不能为空!")
            return false;
        }
    }
    //校验密码
    function checkPass2(){
        var userpass1= $("#userPassword1").val();
        var userpass2= $("#userPassword2").val();
        if (userpass1 != null && userpass1 != ''){
            if (userpass2 != null && userpass2 != ''){
                if (userpass1==userpass2){
                    $("#sp3").html("<font color='green'>√</font>");
                    return true;
                }else {
                     $("#sp3").html("<font color='red'>两次密码不一致,请重新输入!</font>");
                   // alert("两次密码不一致,请重新输入!")
                    return false;
                }
            }else {
                     $("#sp3").html("<font color='red'>第二次密码不能为空!</font>");
                // alert("第二次密码不能为空!")
                     return false;
            }

        }else {
                     $("#sp3").html("<font color='red'>第一次输入密码不能为空!</font>");
            // alert("第一次输入密码不能为空!")
                     return false;
        }
    }
    //验证手机号
    function checkPhone() {
        const phone = $("#userPhone").val();
        var test = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
        if (!test.test(phone)) {
            $("#sp4").html("<font color='red'>请输入11位手机号！</font>");
            // alert("请输入11位手机号！")
            return false;
        } else {
            $.ajax({
                url:"http://localhost:9003/user/queryUserPhone?userPhone="+phone,
                type:"post",
                data:"",
                success:function (data){
                    if (data=="0"){
                        $("#sp4").html("<font color='green'>√</font>");
                        flag = true;
                    }
                    if (data=="1"){
                        $("#sp4").html("<font color='red'>手机号已存在，请重新输入！</font>");
                        flag = false;
                    }
                },error:function (){
                    alert("查询失败！");
                }
            })
        }
    }
        //验证邮箱
        function checkEmail() {
            var email = $("#userEmail").val();
            var Email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if (Email.test(email)) {
                $.ajax({
                    url: "http://localhost:9003/user/queryUserEmail?userEmail=" + email,
                    type: "post",
                    data: "",
                    success: function (data) {
                        if (data == "0") {
                            $("#sp5").html("<font color='green'>√</font>");
                            flag = true;
                        }
                        if (data == "1") {
                            $("#sp5").html("<font color='red'>邮箱地址已存在，请重新输入！</font>");
                            flag = false;
                        }
                    }, error: function () {
                        alert("查询失败！");
                    }
                })
            } else {
                $("#sp5").html("<font color='red'>邮箱格式有误，请重新输入邮箱地址！</font>");
                return false;
            }
        }
            //单选框是否选中
            function ydxy() {
                var xieYi = document.getElementById("xy");
                if (xieYi != null && !xieYi.checked) {
                    alert("请先阅读并勾选注册协议！");
                    return false;
                } else {
                    return true;
                }
            }
        //验证必填项
        function regist() {
            var f1 = checkPass1();
            var f2 = checkPass2();
            var f3 = ydxy();
            if (flag&&f1&&f2&&f3) {
                $.ajax({
                    url: "/user/register",
                    type: "post",
                    data: $("form").serialize(),
                    success: function() {
                        location.href = "/user/toLogin";
                    },error: function() {
                        alert("注册失败！！");
                    }
                });
            } else {
                alert("请检查必填项！");
            }
        }
</script>